<template>
  <div class="MaintenanceAdd-basic">
    <el-dialog title="新增工单" :visible="value" width="630px" @close="close">
      <el-form ref="ruleForm" :model="form" style="width: 100%;margin: 0 auto;">
        <el-form-item label="设备编号:" :label-width="formLabelWidth" prop="innerCode">
          <el-input v-model="form.innerCode" autocomplete="off" maxlength="15" placeholder="输入设备编号" @change="changeInput" />
        </el-form-item>
        <el-form-item label="工单类型:" :label-width="formLabelWidth" prop="productType">
          <el-select v-model="form.productType" placeholder="请选择">
            <el-option label="补货工单" value="productType" />
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量:" :label-width="formLabelWidth">
          <el-button type="text" icon="el-icon-document" @click="replenish">补货清单</el-button>
        </el-form-item>
        <el-form-item label="运营人员:" :label-width="formLabelWidth" prop="userId">
          <el-select v-model="form.userId" placeholder="请选择">
            <el-option v-for="item in manList" :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" :label-width="formLabelWidth" prop="desc">
          <el-input v-model="form.desc" type="textarea" maxlength="40" placeholder="请输入备注(不超过40字)" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button style="background-color: #fbf4f0;border: 0px;" @click="close">取 消</el-button>
        <el-button type="primary" style="background-color: #ff6b28;border: 0px;" @click="addClick">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 补货清单 -->
    <el-dialog title="补货详情" :visible.sync="replenishDetail" width="630px" class="replenish-dialog" @close="closez">
      <el-table
        :data="details"
        style="width: 100%"
      >
        <el-table-column
          prop="channelCode"
          label="货道编号"
          width="100"
        />
        <el-table-column
          prop="skuName"
          label="商品名称"
        />
        <el-table-column
          prop="currentCapacity"
          label="当前数量"
        />
        <el-table-column
          prop="maxCapacity"
          label="还可添加"
        />
        <el-table-column
          prop="maxCapacity"
          label="补满数量"
          width="180"
        >
          <template slot-scope="{row}">
            <el-input-number v-model="num" controls-position="right" :min="1" :max="row.expectCapacity" class="input-num-z" @change="handleChange" />
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button style="background-color: #fbf4f0;border: 0px;" @click="closez">取 消</el-button>
        <el-button type="primary" style="background-color: #ff6b28;border: 0px;" @click="closez">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { channelListApi, operatorListManApi } from '../../../api/operate'
export default {
  name: 'MaintenanceAdd',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      num: 0,
      form: {
        innerCode: '',
        productType: '',
        desc: ''

      },
      formLabelWidth: '100px',
      // rules: {
      //   name1: [
      //     { required: true, message: '请输入设备编号', trigger: 'blur' }
      //   ],
      //   name2: [
      //     { required: true, message: '请选择工单类型', trigger: 'blur' },
      //     { type: 'date', required: true, message: '请选择工单类型', trigger: 'change' }
      //   ],
      //   name3: [
      //     { required: true, message: '请选择运营人员', trigger: 'blur' },
      //     { type: 'date', required: true, message: '请选择运营人员', trigger: 'change' }
      //   ],
      //   name4: [
      //     { required: true, message: '请输入备注', trigger: 'blur' },
      //     { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
      //   ]
      // },
      replenishDetail: false,
      details: [],
      manList: []
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    close() {
      // 通知父组件关闭弹窗
      this.$emit('input', false)
      // 只对有校验的表单才会清空
      // this.$refs.fromRef.resetFields()
      // 将数据初始化,表单就会清空
      // this.form = this.$options.data().form
      // 需要清空一下这个id,不然在进行添加这个id会一直存在就一直编辑
      // this.$emit('update:edit-id', null)
    },
    closez() {
      this.replenishDetail = false
    },
    // 补货详情
    replenish() {
      if (!this.form.innerCode) return
      this.replenishDetail = true
      this.goodsTaskDetails()
    },
    // 补货详情的数据
    async goodsTaskDetails() {
      const res = await channelListApi(this.form.innerCode)
      console.log(res, 55555)
      this.details = res.data
      // this.num = res.data[0].expectCapacity
    },
    // 确定
    addClick() {

    },
    async  changeInput() {
      const res = await operatorListManApi(this.form.innerCode)
      console.log(res, 1212121)
      this.manList = res.data
    }
  }
}
</script>
<style lang='scss'  >

 .MaintenanceAdd-basic{
  .el-dialog{
    border-radius: 10px;
    padding: 20px;
  .el-input__inner{
      width: 396px;
    }
    .el-textarea{
      width: 88%;
    }
  }
  .replenish-dialog{
      .el-dialog{
    height: 550px;
    .el-table td, .el-table th.is-leaf{
    border-bottom: 0px solid #EBEEF5;
    }

      }
  }
  .input-num-z{
  .el-input__inner{
    width: 180px;
  }
}
}

</style>
